﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" http-equiv="Content-Type" content="user-scalable=no, maximum-scale=1, minimum-scale=1, initial-scale=1.0" />
    <meta charset="UTF-8">
    <title></title>
    <link href="http://cdn.bootcss.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/Buttons/2.0.0/css/buttons.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <!--<link href="http://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.css" rel="stylesheet">-->
    <link rel="stylesheet" href="css/style.css" />
    <link href="css/banner.css" rel="stylesheet" />
    <link href="css/pageStyle.css" rel="stylesheet" />
    <link href="css/royalslider.css" rel="stylesheet" />
    <script src="http://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
    <!--<script src="script/jquery.min.js"></script>-->
    <script src="http://cdn.bootcss.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="http://www.bootcss.com/p/unslider/unslider.min.js"></script>
    <script src="http://cdn.bootcss.com/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>
    <script src="http://cdn.bootcss.com/lazysizes/2.0.0-rc1/lazysizes.min.js"></script>
    <script src="script/jquery.royalslider.min.js"></script>
    <!--<script src="http://cdn.bootcss.com/jquery.touchswipe/1.6.18/jquery.touchSwipe.min.js"></script>-->
    <!--<script src="http://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>-->
    <!--<script src="script/touchswipe.min.js"></script>-->
    <style>
        @charset "utf-8";

        html, body {
            /*font-family: sans-serif;*/
            font-family: "Helvetica" !important;
            /*font: 400 14px/1.5 arial,"lucida grande",verdana,"microsoft yahei",hei;*/
            /*font-size: 10px;*/
            /*background-color: #f2f4f7;*/
            background-color: #eee;
        }

        body {
            /*font-family: "Hiragino Sans GB W3","microsoft yahei","WenQuanYi Micro Hei",sans-serif !important;*/
            /*font-family: "Helvetica Neue",Helvetica,STHeiTi,sans-serif;*/
            overflow-x: initial !important;
            width: 10rem;
            zoom: 1;
            margin: 0 auto;
        }

        .circles .circle.on {
            background-color: #f5734b;
        }

        .circles .circle {
            display: inline-block;
            margin-right: 3px;
            background-color: #ccc;
            border-radius: 4px;
            -webkit-border-radius: 4px;
            width: 8px;
            height: 8px;
        }


        @media only screen and (min-device-width: 320px) and (max-device-width: 480px), (max-width: 900px) {
            .banner ul li {
                height: 180px;
            }
        }
    </style>
</head>
<body style="padding: 0 15px 40px 0;">
    <div ng-app="myApp" class="container-fluid">

        <div id="divIndex">

            <div id="divHome">
                <div class="row">
                    <header class="index-head" style="padding-left:15px">
                        <div style="background-color: transparent; padding: 1px 1px 1px 1px;">
                            <div id="btnSearch" class="search J_search_trigger">看看都有啥</div>
                        </div>
                    </header>
                </div>
                <div class="row" id="divCategory">
                    <!--<div class="index-category Fix">
                        <div id="J_slider" class="index_slider" style="visibility: visible;">
                            <div class="index_slider-wrap Fix">
                                <div ng-controller="categoryCtrl" class="Fix page" data-index="0" style="left: 0px; transition-duration: 300ms; transform: translate(0px, 0px) translateZ(0px);">
                                    <a ng-repeat="x in names" href="{{x.href}}" class="item" style="width: 25%;">
                                        <img class="icon" src="{{x.img}}">
                                        <div style="font-size:12px;color:gray">{{x.name}}</div>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <ul class="circles">
                            <li class="circle on"></li>
                            <li class="circle"></li>
                        </ul>
                    </div>-->
                    <div id="divCategory">
                        <div class="index-category Fix">
                            <div id="J_slider" class="index_slider" style="visibility: visible;">
                                <div class="index_slider-wrap Fix">
                                    <div ng-controller="categoryCtrl" class="Fix page" data-index="0" style="left: 0px; transition-duration: 300ms; transform: translate(0px, 0px) translateZ(0px);">
                                        <a ng-repeat="x in names" href="{{x.href}}" class="item" style="width: 25%;">
                                            <img class="icon" src="{{x.img}}">
                                            <div style="font-size:12px;color:gray">{{x.name}}</div>
                                        </a>
                                    </div>
                                    <div ng-controller="category2Ctrl" class="Fix page" data-index="0" style="left: 0px; transition-duration: 300ms; transform: translate(0px, 0px) translateZ(0px);">
                                        <a ng-repeat="x in names" href="{{x.href}}" class="item" style="width: 25%;">
                                            <img class="icon" src="{{x.img}}">
                                            <div style="font-size:12px;color:gray">{{x.name}}</div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <ul class="circles">
                                <li id="circle1" class="circle on"></li>
                                <li id="circle2" class="circle"></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="row spliter"></div>
                <div id="divNewShop">
                    <div id="divBackToTop" class="back_top back_top-processed" style="display: block; z-index:2">
                    </div>
                    <div class="row">
                        <ul ng-controller="shopCtrl" when-scrolled="loadMore()" style="list-style:none;padding:0px;margin-bottom:0px">
                            <li ng-repeat="x in names" class="z-m-product-item" tag="{{x.ID}}" onclick="ViewDetails(this)">
                                <a href="#">
                                    <div class="item-top">
                                        <div class="product-image">
                                            <img src="{{x.ImageUrl}}">
                                        </div>
                                        <div class="product-extra">
                                            <span>舵手</span>
                                            <span class="separator">|</span>
                                            <span>{{$index >5 ? '今日新品' : '舵手推荐' }}</span>
                                        </div>
                                        <div class="product-price price-schema-1">
                                            <div class="product-price-now">￥<em>{{x.AfterPrice}}</em></div>
                                            <div class="product-promotion">原价￥<s>{{x.CurrentPrice}}</s></div>
                                        </div>
                                        <span class="product-recommend-label"><em>New</em></span>
                                    </div>
                                    <div class="item-bottom">
                                        <h5 class="product-title">{{x.Title}}</h5>
                                        <p class="product-describe">优惠券<span style="color:red">{{x.DiscountPrice}}</span>元，剩余数量<span style="color:red">{{x.SurplusAmount}}</span>/{{x.TotalAmount}}，销量<span style="color:red">{{x.SaleAmount}}</span>  </p>
                                    </div>
                                </a>
                                <div ng-show='busy'>数据加载中，请稍候...</div>
                                <div ng-if="$index+1!=names.length" class="spliter"></div>
                                <div ng-if="$index+1==names.length" class="spliter" style="border-bottom: 0px; text-align: center; font-size: 12px; color: gray; padding-top:24px">感谢都是你，陪我到最后!</div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div id="divSearch" class="hidden">
                <div class="search_container row">
                    <form class="J_form">
                        <div class="head_cnt">
                            <div class="head_cnt_input" style="padding-left:25px">
                                <input type="text" placeholder="想要的，和更想要的" id="keywrod" name="keyword" class="search J_search_input" autocomplete="off">
                                <!--<i class="clear" data-role="clear"></i>-->
                                <input type="submit" onclick="Search()">
                            </div>
                            <a id="btnCancelSearch" class="cancel J_cancel" href="#">取消</a>
                        </div>
                        <!--<div class="J_key_list key_list Fix" style="padding: 10px 15px 0px 33px;">
                            <a href="javascript:void(0)" data-id="">蛋糕</a>
                            <a href="javascript:void(0)" data-id="">KTV</a>
                            <a href="javascript:void(0)" data-id="">日韩料理</a>
                            <a href="javascript:void(0)" data-id="">现烤蛋糕</a>
                            <a href="javascript:void(0)" data-id="">探鱼</a>
                            <a href="javascript:void(0)" data-id="">喜茶</a>
                            <a href="javascript:void(0)" data-id="">美食</a>
                            <a href="javascript:void(0)" data-id="">自助餐</a>
                            <a href="javascript:void(0)" data-id="">小龙虾</a>
                        </div>
                        <div class="J_history_list key_list Fix" style="display: block;">
                            <div></div>
                            <div class="J_history_title">搜索记录</div>
                            <div class="history_list">
                                <a href="javascript:void(0)" style="padding-left:33px" data-id="">烤鸭</a>
                            </div>
                        </div>
                        <a class="J_history_clear link-btn" href="javascript:;" style="display: block;">清除搜索记录</a>
                        <ul class="J_suggest_list suggest_list" style="display: none;"> </ul>-->
                    </form>
                </div>
            </div>

        </div>

        <div id="divEvent" class="hidden">
            <div id="divEventDetails" ng-controller="goodsDetailsCtrl">
                <div class="row" ng-model="names">
                    <div>
                        <div id="divHeaderBtn">
                            <div style="position: absolute; top: 21px; left: 22px; border: 0; z-index: 888; padding: 0; margin: 0; background-color:transparent">
                                <a href="#" tag="back"><span class="glyphicon glyphicon-chevron-left" style="color:white"></span></a>
                            </div>
                            <a class="back"></a>
                        </div>
                        <img class="img-responsive" width="100%" src="{{names.ImageUrl}}" />
                    </div>
                    <div class="eventPadding">
                        <div style="padding-top: 2px;">
                            <span>{{names.Title}}</span>
                        </div>
                        <div style="border-bottom: 1px solid #E0DFDF; padding-top: 12px; "></div>
                        <div style="margin: 0px; padding-top: 10px;">
                            <span style="color: #AF7E2A;">{{names.Description}}</span>
                            <p style="color:red;padding: 6px 0px 3px 0px; margin:0px">
                                券后价<strong>￥{{names.AfterPrice}} </strong><span style="color:gray;font-size:12px;padding-left:10px">原价: <s>￥{{names.CurrentPrice}}</s> </span>
                            </p>
                        </div>
                    </div>
                    <div class="spliter"></div>
                    <div class="eventPadding">
                        <div style="padding-top: 2px;">
                            <span>优惠券信息</span>
                        </div>
                        <div style="border-bottom: 1px solid #E0DFDF; padding-top: 12px; "></div>
                        <div>
                            <div class="tip-title">金额</div>
                            <div class="tip-des">优惠券 {{names.DiscountPrice}} 元</div>
                        </div>
                        <div>
                            <div class="tip-title">使用规则</div>
                            <div class="tip-des">{{names.Rule}}</div>
                        </div>
                        <div>
                            <div class="tip-title">剩余数量</div>
                            <div class="tip-des">优惠券剩余 {{names.SurplusAmount}} 张，已领券{{names.UsedAmount}}张</div>
                        </div>
                        <div>
                            <div class="tip-title">有效期</div>
                            <div class="tip-des">过期时间{{names.ExpiredTime | date:'yyyy/MM/dd' }}</div>
                        </div>
                    </div>
                    <div class="spliter"></div>

                    <div id="divViewMask" class="hidden">
                        <!--被遮罩的容器class='detail_body_blur'会出现模糊效果-->
                        <div class="detail_mask" style="display: block;">
                            <div class="detail_mask_bd" style="max-height:100%;overflow-y:auto;">
                                <iframe id="ifViewTao" width="100%" height="1000px" src=""></iframe>
                            </div>
                            <span class="detail_mask_close"></span>
                        </div>
                    </div>

                    <div id="divBuyMask" class="hidden">
                        <div class="detail_mask" style="display: block;">
                            <div class="detail_mask_bd" style="max-height:100%;overflow-y:auto;">
                                <iframe id="ifBuyTao" width="100%" height="1000px" src=""></iframe>
                            </div>
                            <span class="detail_mask_close"></span>
                        </div>
                    </div>

                </div>
                <!--<div class="row">
                    <div>
                        <div id="divHeaderBtn">
                            <div style="position: absolute; top: 21px; left: 22px; border: 0; z-index: 888; padding: 0; margin: 0; background-color:transparent">
                                <a href="#" tag="back"><span class="glyphicon glyphicon-chevron-left" style="color:white"></span></a>
                            </div>
                            <a class="back"></a>
                        </div>
                        <img class="img-responsive" width="100%" src="http://acdn.taokezhushou.com/c62b82318c91ab34a90d377a152703b3.jpg@1e_1c_0o_0l_287h_287w_100q.src" />
                    </div>
                    <div class="eventPadding">
                        <div style="padding-top: 2px;">
                            <span>【5.8包邮】韩版冬季加厚绒保暖可爱全指毛线手套</span>
                        </div>
                        <div style="border-bottom: 1px solid #E0DFDF; padding-top: 12px; "></div>
                        <div style="margin: 0px; padding-top: 10px;">
                            <span style="color: #AF7E2A;">加厚加绒，优质毛线，冬季保暖不要不要的，多色可选，冬季女神卖萌神器，店铺满16－1，领券超划算</span>
                            <p style="color:red;padding: 6px 0px 3px 0px; margin:0px">
                                券后价<strong>￥320 </strong><span style="color:gray;font-size:12px;padding-left:10px">原价: <s>￥400</s> </span>
                            </p>
                        </div>
                    </div>
                    <div class="spliter"></div>
                    <div class="eventPadding">
                        <div style="padding-top: 2px;">
                            <span>优惠券信息</span>
                        </div>
                        <div style="border-bottom: 1px solid #E0DFDF; padding-top: 12px; "></div>
                        <div>
                            <div class="tip-title">金额</div>
                            <div class="tip-des">优惠券 10.00 元</div>
                        </div>
                        <div>
                            <div class="tip-title">使用规则</div>
                            <div class="tip-des">单笔满19.00元可用，每人限领1张</div>
                        </div>
                        <div>
                            <div class="tip-title">剩余数量</div>
                            <div class="tip-des">优惠券剩余 17899 张，已领券2101张</div>
                        </div>
                        <div>
                            <div class="tip-title">有效期</div>
                            <div class="tip-des">过期时间2016/10/30</div>
                        </div>
                    </div>
                    <div class="spliter"></div>
                </div>-->
            </div>

            <div id="divFooter">
                <!--<div id="divBackToTop" class="back_top back_top-processed" style="display: block;">
                </div>-->
                <nav class="navbar navbar-default navbar-fixed-bottom" style="border: 0px; min-height:40px;background-color:white">
                    <table class="table" id="tbNavigation" style="text-align: center; margin-bottom:0px;">
                        <tr>
                            <td style="padding: 2px 5px 2px 5px; margin: 0px;">
                                <img src="img/share-25.png" width="18" />
                                <div style="font-size: smaller; padding-top: 2px;">分享</div>
                            </td>
                            <td style="padding:0px;border:0px"><a href="#" onclick="Go('view');" class="button button-block button-highlight btn-lg-order-status" style="padding:0px; line-height:48px; height:45px">点击看详情</a></td>
                            <td style="padding: 0px; border: 0px"><a href="#" onclick="Go('buy');" class="button button-block button-caution btn-lg-order-status" style="padding: 0px; line-height: 48px; height: 45px; ">免费领券</a></td>
                        </tr>
                    </table>
                </nav>
            </div>

        </div>

    </div>
</body>
</html>

<script src="script/app.js"></script>
<script src="script/IndexController.js"></script>
<script src="script/common.js"></script>
<script>

    var scrollHeight = 0;

    var startLoad = true;

    var silder = $('.index_slider-wrap').royalSlider({
        arrowsNav: true,
        loop: false,
        keyboardNavEnabled: true,
        controlsInside: false,
        imageScaleMode: 'fill',
        arrowsNavAutoHide: false,
        autoScaleSlider: true,
        autoScaleSliderWidth: 960,
        autoScaleSliderHeight: 450,
        controlNavigation: 'bullets',
        thumbsFitInViewport: false,
        navigateByClick: true,
        startSlideId: 0,
        autoPlay: false,
        transitionType: 'move',
        globalCaption: true,
        deeplinking: {
            enabled: true,
            change: false
        },
        imgWidth: 1400,
        imgHeight: 680
    }).data("royalSlider");

    silder.ev.on('rsAfterSlideChange', function () {

        if (silder.currSlideId == 0) {
            $("#circle2").removeClass().addClass("circle");
            $("#circle1").removeClass().addClass("circle on");
        }
        else {
            $("#circle1").removeClass().addClass("circle");
            $("#circle2").removeClass().addClass("circle on");
        }
    });

    function Go(type) {
        if (type == "view") {
            $("#divViewMask").removeClass().show();
        }
        else {
            $("#divBuyMask").removeClass().show();
        }

        $("#divFooter").hide();
    }

    function Search() {
        var val = $("#keywrod").val();
        if (!common.checkValue(val))
            return;

        window.location = encodeURI("list.html?cd=" + val + "&type=All");
    }

    $(".detail_mask_close").click(function () {
        $("#divFooter").removeClass().show();
        $("#divViewMask").hide();
        $("#divBuyMask").hide();
    })

    function AfterCompleted(ctx) {
        if (ctx == null) {
            alert("无数据.");
            return;
        }

        //$("#ifViewTao").attr("src", ctx.ProductDetail);
        //$("#ifBuyTao").attr("src", ctx.DiscountUrl);

        var ele = document.querySelector("[ng-controller=goodsDetailsCtrl]");

        angular.element(ele).scope().update(ctx);

    }

    function ViewDetails(obj) {

        var id = $(obj).attr('tag');
        common.commonAjax({ type: 'get', url: 'api/values/Get/' + id, sMethod: AfterCompleted });
        startLoad = false;
        scrollHeight = $(document).scrollTop();
        //$("#ifViewTao").attr("src", "https://detail.m.tmall.com/item.htm?id=539741570109");
        //$("#ifBuyTao").attr("src", "https://taoquan.taobao.com/coupon/unify_apply.htm?sellerId=103906753&activityId=040b0b8d2bc14f33927669a61ae33c09&scene=taobao_shop");
        $("#divIndex").hide();
        $("#divEvent").removeClass().show();
        scrollToTop();
    }

    $("#divHeaderBtn").click(function () {
        startLoad = true;
        $("#ifViewTao").attr("src", "");
        $("#ifBuyTao").attr("src", "");
        $("#divEvent").hide();
        $("#divIndex").show();
        $.scrollTo(scrollHeight, 1);
        //$(window).off("scroll", "");
    });

    common.CreatePullDownCtrl({ name: 'shopCtrl', dictName: 'whenScrolled', url: 'api/values/search', pars: { limit: 10, type: 'Index' }, app: app });

    common.CreateController({ name: 'goodsDetailsCtrl', objType: "object", app: app });


    


</script>
